<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib prefix="s" uri="/struts-tags"%>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'testCheckBoxJsp.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type='text/javascript' src='js/jquery.validate.min.js'></script>
 	<script type='text/javascript' src='js/common.js'></script>

	<script type='text/javascript' src='<%=basePath %>/dwr/engine.js'></script>
 	<script type='text/javascript' src='<%=basePath %>/dwr/util.js'></script>


<script type="text/javascript">

	$(document).ready(function(){
	var $likebox=$("[name=like]:checkbox");//把复选框组赋给一个变量；
	var	$allcheck=$(":checkbox[name=allcheck]")//把全选复选框赋给一个变量；
		function checks(){
			var flag=true;
			$likebox.each(function(){
				if(!this.checked){
					flag=false;
					}
				$allcheck.attr("checked",flag);
			});
		}		//首先定义一个自定义函数，此函数的功能是：检查复选框数组中的选中状态；并更具他的每一个复选框的选中状态来，定义全选复选框是否选中；

		$allcheck.click(function(){
			$likebox.attr("checked",this.checked);
		});		//为全选框绑定一个单击事件；并通过点击它来选中或取消复选框组

		$likebox.click(function(){checks();});
		//为复选框组中的每个元素绑定一个点击事件，并且调用自定义函数来判断，并通过每个元素的状态来定义全选按钮的状态；
		$(".allcheck").bind("click",function(){
			$likebox.attr("checked",true);
			checks();
		});		//为全选按钮绑定一个点击事件，并调用自定义函数来判断；
		$(".nocheck").click(function(){
			$likebox.attr("checked",false);
			checks();
		});		//为取消按钮绑定一个点击事件，并调用自定义函数判断；
		$(".recheck").click(function(){
			$likebox.each(function(){
				this.checked=!this.checked;
			});
			checks();
		});	//为反选钮绑定一个点击事件，并调用自定义函数判断；
		$(".enter").click(function(){
			var str="您选中的项目是：\n";
			$("[name=like]:checkbox:checked").each(function(){
				str+=$(this).val()+"\n";
			});
			alert(str);
		});	//为提交钮绑定一个点击事件，并通过得到的以选中按钮来输出被选中的项的值；
	});
</script>


<script type="text/javascript">

 function quanXuanChk(){
 	var ch = document.getElementsByName("enjoy");
 	var allchk = document.getElementsByName("allchk"); //全选按钮
	
	var fuzhi = document.getElementById("txtVal");
	
	var hqValue="";
	
 	for(i=0;i <allchk.length;i++) {
 		alert(">>>>"+allchk[i].checked);
 		if(allchk[i].checked == true){ //如果点击了全选，就标记着复选框全部选中

			for(i=0;i <ch.length;i++) {
			//	alert("Chk_checked="+ch[i].checked); 
				if(ch[i].checked == false){
				//	alert("设置为复选框选中");
					ch[i].checked = true;  //设置为复选框选中
					 if(i == (ch.length-1)){
						hqValue = hqValue+ch[i].value;
					 }else{
					    hqValue = (hqValue+ch[i].value)+"_";
					 }
				//	alert(">>"+hqValue);
				}
			}		
		}else{
	 		for(i=0;i <ch.length;i++) {
				//alert("Chk_checked="+ch[i].checked); 
				if(ch[i].checked == true ){
				//	alert("设置为不选中");
					ch[i].checked = false;  //设置为复选框不选中
				}
			}
	 	}  
 	} 
 	  $("#txtVal").val(hqValue);
 	  alert("MM==="+$("#txtVal").val());  
 	  //document.getElementById("txtVal").value= hqValue;
 	  
 	  var pp =  $("#txtVal").val();
 	   sp_val = pp.split("_");
		for(i=0;i <sp_val.length;i++){
			alert("第"+(i+1)+"个="+sp_val[i]);
		}
 	  
 }

</script>

  </head>
  
  <body>
    <form method=post action="">
	<table border="0">
		<tr>
			<td>选择您喜欢的选项：<input type="checkbox" name="allcheck">全选/取消</td>
		</tr>
		<tr>
			<td>
				<label>羽毛球：</label><input type="checkbox" name="like" value="羽毛球">&nbsp;&nbsp;&nbsp;
				篮球：<input type="checkbox" name="like" value="篮球">&nbsp;&nbsp;&nbsp;
				棒球：<input type="checkbox" name="like" value="棒球">&nbsp;&nbsp;&nbsp;
				高尔夫：<input type="checkbox" name="like" value="高尔夫">&nbsp;&nbsp;&nbsp;
				足球：<input type="checkbox" name="like" value="足球">&nbsp;&nbsp;&nbsp;<br>
			</td>
		</tr>
		<tr>
			<td>
				<input type="button" class="allcheck" value="全选">
				<input type="button" class="nocheck" value="取消">
				<input type="button" class="recheck" value="反选">
				<input type="button" class="enter" value="提交">
			</td>
		</tr>
	</table>
	</form>
	
	
	<table border="0">
		<tr>
			<td>选择您喜欢的选项：<input type="checkbox" name="allchk" onclick="quanXuanChk();">全选/取消</td>
		</tr>
		<tr>
			<td>
				<label>羽毛球：</label>
			</td>
			<td><input type="checkbox" name="enjoy" value="羽毛球">&nbsp;</td>
		</tr>
		<tr>
			<td>棒球：</td>
			<td><input type="checkbox" name="enjoy" value="棒球"></td>
		</tr>
		
		<tr>
			<td>篮球：</td>
			<td><input type="checkbox" name="enjoy" value="篮球">&nbsp;</td>
		</tr>
		
		<tr>
			<td>高尔夫：</td>
			<td><input type="checkbox" name="enjoy" value="高尔夫"></td>
		</tr>
		
		<tr>
			<td>足球：</td>
			<td><input type="checkbox" name="enjoy" value="足球"></td>
		</tr>
		
		<tr>
			<td>足球：</td>
			<td><input type="text" name="txtVal" id="txtVal" value=""></td>
		</tr>
		
		<tr>
			<td>
				<input type="button" onclick="quanXuanChk()" value="全选">
				<input type="button" value="取消">
				<input type="button" class="recheck" value="反选">
				<input type="button" class="enter" value="提交">
			</td>
		</tr>
	</table>
	
  </body>
</html>
